<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>如风壁纸 - 详情</title>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link rel="stylesheet" href="css/styles.css">
</head>
<body class="bg-gray-50 text-gray-900 font-sans">
    <div id="app" class="phone-container relative overflow-hidden mx-auto">
        <!-- Status Bar -->
        <div id="status-bar" class="status-bar flex justify-between items-center px-5 py-1 bg-black bg-opacity-10 text-white text-xs">
            <span id="time">9:41</span>
            <div class="status-icons flex space-x-1">
                <span><i class="fas fa-signal"></i></span>
                <span><i class="fas fa-wifi"></i></span>
                <span><i class="fas fa-battery-three-quarters"></i></span>
            </div>
        </div>

        <!-- Main Content Area -->
        <div id="content" class="content-area bg-black">
            <!-- Detail View Content -->
            <div class="detail-view">
                <!-- Will be filled by JavaScript -->
            </div>
        </div>
    </div>

    <script src="js/app.js"></script>
    <script>
        // Initialize clock for this page
        function updateClock() {
            const now = new Date();
            const hours = now.getHours().toString().padStart(2, '0');
            const minutes = now.getMinutes().toString().padStart(2, '0');
            document.getElementById('time').textContent = `${hours}:${minutes}`;
        }
        
        // Update clock
        updateClock();
        setInterval(updateClock, 60000);
        
        // Wallpaper database
        const wallpapers = [
            { id: 1, url: 'https://picsum.photos/seed/wall1/900/1600', category: 'nature' },
            { id: 2, url: 'https://picsum.photos/seed/wall2/900/1600', category: 'city' },
            { id: 3, url: 'https://picsum.photos/seed/wall3/900/1600', category: 'abstract' },
            { id: 4, url: 'https://picsum.photos/seed/wall4/900/1600', category: 'minimal' },
            { id: 5, url: 'https://picsum.photos/seed/wall5/900/1600', category: 'dark' },
            { id: 6, url: 'https://picsum.photos/seed/wall6/900/1600', category: 'bright' },
            { id: 7, url: 'https://picsum.photos/seed/wall7/900/1600', category: 'nature' },
            { id: 8, url: 'https://picsum.photos/seed/wall8/900/1600', category: 'city' },
            { id: 9, url: 'https://picsum.photos/seed/wall9/900/1600', category: 'abstract' },
            { id: 10, url: 'https://picsum.photos/seed/wall10/900/1600', category: 'minimal' }
        ];
        
        // Get favorites from localStorage
        const favorites = JSON.parse(localStorage.getItem('favorites') || '[]');
        
        // Get current wallpaper ID from URL
        const urlParams = new URLSearchParams(window.location.search);
        const wallpaperId = parseInt(urlParams.get('id')) || 1;
        
        // Find the wallpaper by ID
        const wallpaper = wallpapers.find(w => w.id === wallpaperId) || wallpapers[0];
        
        // Check if it's in favorites
        const isFavorite = favorites.some(f => f.id === wallpaper.id);
        
        // Render wallpaper detail view
        const detailView = document.querySelector('.detail-view');
        detailView.innerHTML = `
            <img src="${wallpaper.url}" class="detail-image" alt="Wallpaper" />
            
            <div class="absolute top-4 left-4">
                <div class="back-btn" id="back-button">
                    <i class="fas fa-chevron-left"></i>
                </div>
            </div>
            
            <div class="swipe-indicator">
                <i class="fas fa-chevron-left"></i>
                <div>左右滑动切换壁纸</div>
            </div>
            
            <div class="action-buttons">
                <div class="action-btn" id="download-btn">
                    <i class="fas fa-download"></i>
                </div>
                <div class="action-btn" id="favorite-btn">
                    <i class="fas fa-heart ${isFavorite ? 'text-red-500' : ''}"></i>
                </div>
                <div class="action-btn" id="apply-btn">
                    <i class="fas fa-check"></i>
                </div>
            </div>
        `;
        
        // Add back button event listener
        document.getElementById('back-button').addEventListener('click', () => {
            window.history.back();
        });
        
        // Add download button event listener
        document.getElementById('download-btn').addEventListener('click', () => {
            showToast('壁纸已保存到相册');
        });
        
        // Add favorite button event listener
        document.getElementById('favorite-btn').addEventListener('click', (e) => {
            const icon = e.currentTarget.querySelector('i');
            
            if (icon.classList.contains('text-red-500')) {
                // Remove from favorites
                icon.classList.remove('text-red-500');
                const index = favorites.findIndex(f => f.id === wallpaper.id);
                if (index !== -1) {
                    favorites.splice(index, 1);
                    localStorage.setItem('favorites', JSON.stringify(favorites));
                }
                showToast('已从收藏中移除');
            } else {
                // Add to favorites
                icon.classList.add('text-red-500');
                const isAlreadyFavorite = favorites.some(f => f.id === wallpaper.id);
                if (!isAlreadyFavorite) {
                    favorites.push(wallpaper);
                    localStorage.setItem('favorites', JSON.stringify(favorites));
                }
                showToast('已添加到收藏');
            }
        });
        
        // Add apply button event listener
        document.getElementById('apply-btn').addEventListener('click', () => {
            showApplyOptions();
        });
        
        // Add swipe gesture detection
        let startX, endX;
        
        detailView.addEventListener('touchstart', (e) => {
            startX = e.touches[0].clientX;
        });
        
        detailView.addEventListener('touchend', (e) => {
            endX = e.changedTouches[0].clientX;
            
            // Detect swipe direction
            if (startX - endX > 50) {
                // Swipe left - next wallpaper
                navigateToNextWallpaper('next');
            } else if (endX - startX > 50) {
                // Swipe right - previous wallpaper
                navigateToNextWallpaper('prev');
            }
        });
        
        // For mouse-based demo
        detailView.addEventListener('mousedown', (e) => {
            startX = e.clientX;
        });
        
        detailView.addEventListener('mouseup', (e) => {
            endX = e.clientX;
            
            if (startX - endX > 50) {
                navigateToNextWallpaper('next');
            } else if (endX - startX > 50) {
                navigateToNextWallpaper('prev');
            }
        });
        
        // Navigate to next/previous wallpaper
        function navigateToNextWallpaper(direction) {
            const currentIndex = wallpapers.findIndex(w => w.id === wallpaper.id);
            let nextIndex;
            
            if (direction === 'next') {
                nextIndex = (currentIndex + 1) % wallpapers.length;
            } else {
                nextIndex = (currentIndex - 1 + wallpapers.length) % wallpapers.length;
            }
            
            const nextWallpaper = wallpapers[nextIndex];
            window.location.href = `detail.html?id=${nextWallpaper.id}`;
        }
        
        // Show toast message
        function showToast(message) {
            // Create toast element
            const toast = document.createElement('div');
            toast.className = 'fixed bottom-20 left-1/2 transform -translate-x-1/2 bg-black bg-opacity-75 text-white px-4 py-2 rounded-full text-sm z-50';
            toast.textContent = message;
            
            // Add to document
            document.body.appendChild(toast);
            
            // Remove after timeout
            setTimeout(() => {
                toast.style.opacity = '0';
                toast.style.transition = 'opacity 0.3s ease';
                setTimeout(() => toast.remove(), 300);
            }, 2000);
        }
        
        // Show apply wallpaper options
        function showApplyOptions() {
            // Create modal element
            const modal = document.createElement('div');
            modal.className = 'fixed inset-0 flex items-end justify-center bg-black bg-opacity-50 z-50';
            
            modal.innerHTML = `
                <div class="bg-white rounded-t-xl w-full p-6">
                    <h3 class="text-center font-bold text-lg mb-5">设置壁纸</h3>
                    <div class="grid grid-cols-2 gap-4">
                        <button class="option-btn bg-gray-100 rounded-xl p-4 flex flex-col items-center">
                            <i class="fas fa-mobile-alt text-2xl mb-2"></i>
                            <span>锁定屏幕</span>
                        </button>
                        <button class="option-btn bg-gray-100 rounded-xl p-4 flex flex-col items-center">
                            <i class="fas fa-home text-2xl mb-2"></i>
                            <span>主屏幕</span>
                        </button>
                        <button class="option-btn bg-gray-100 rounded-xl p-4 flex flex-col items-center">
                            <i class="fas fa-clone text-2xl mb-2"></i>
                            <span>两者都设置</span>
                        </button>
                        <button class="option-btn bg-gray-100 rounded-xl p-4 flex flex-col items-center">
                            <i class="fas fa-crop-alt text-2xl mb-2"></i>
                            <span>调整裁剪</span>
                        </button>
                    </div>
                    <button id="cancel-apply" class="mt-4 w-full py-3 text-blue-500 font-medium">取消</button>
                </div>
            `;
            
            // Add to document
            document.body.appendChild(modal);
            
            // Add event listeners
            document.querySelectorAll('.option-btn').forEach(btn => {
                btn.addEventListener('click', () => {
                    modal.remove();
                    showToast('壁纸设置成功');
                });
            });
            
            document.getElementById('cancel-apply').addEventListener('click', () => {
                modal.remove();
            });
            
            // Add click outside to close
            modal.addEventListener('click', (e) => {
                if (e.target === modal) modal.remove();
            });
        }
    </script>
</body>
</html> 